import React from "react";
import "./index.less";
import {
  Button,
  ConfigProvider,
  Form,
  GetProp,
  Input,
  InputNumber,
  TimePicker,
  Upload,
  UploadProps,
  message,
} from "antd";
import TextArea from "antd/es/input/TextArea";
import locale from "antd/locale/zh_CN";
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
import { IRoomForm } from "./type";
import {
  LoadingOutlined,
  PlusOutlined,
  SmileOutlined,
} from "@ant-design/icons";
import { upload } from "../../server/api";
import { COMURL } from "../../constant";
dayjs.locale("zh-cn");
type FileType = Parameters<GetProp<UploadProps, "beforeUpload">>[0];
const RoomForm: React.FC<IRoomForm> = ({
  form,
  dateChange,
  onFinish,
  imageUrl,
  setImageUrl,
  handleChange,
  loading,
}) => {
  const beforeUpload = (file: FileType) => {
    const isJpgOrPng = file.type === "image/jpeg" || file.type === "image/png";
    if (!isJpgOrPng) {
      message.error("You can only upload JPG/PNG file!");
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
      message.error("Image must smaller than 2MB!");
    }
    return isJpgOrPng && isLt2M;
  };

  const uploadPicture = async (option: any) => {
    const formdata = new FormData();
    formdata.append("files", option.file);
    const urlList: any = await upload(formdata);
    setImageUrl(urlList[0]);
  };
  const uploadButton = (
    <button style={{ border: 0, background: "none" }} type="button">
      {loading ? <LoadingOutlined /> : <PlusOutlined />}
      <div style={{ marginTop: 8 }}>Upload</div>
    </button>
  );
  return (
    <>
      <Form
        layout="horizontal"
        style={{ maxWidth: 600 }}
        form={form}
        onFinish={onFinish}
      >
        <Form.Item label="房间照" valuePropName="fileList">
          <Upload
            name="avatar"
            listType="picture-card"
            className="avatar-uploader"
            showUploadList={false}
            beforeUpload={beforeUpload}
            onChange={handleChange}
            customRequest={uploadPicture}
          >
            {imageUrl ? (
              <img
                src={`${COMURL}${imageUrl}`}
                alt="avatar"
                style={{ width: "100%" }}
              />
            ) : (
              uploadButton
            )}
          </Upload>
        </Form.Item>
        <Form.Item label="房间名称" name="roomName">
          <Input />
        </Form.Item>
        <Form.Item label="开放时间段" name="roomTime">
          <ConfigProvider locale={locale}>
            <TimePicker.RangePicker
              prefix={<SmileOutlined />}
              onChange={dateChange}
              format={"HH:mm:ss"}
            />
          </ConfigProvider>
        </Form.Item>
        <Form.Item label="房间大小" name="roomSize">
          <InputNumber />
        </Form.Item>
        <Form.Item label="房间描述" name="roomIntroduce">
          <TextArea rows={4} />
        </Form.Item>
        <Form.Item>
          <Button style={{ width: "100%" }} type="primary" htmlType="submit">
            确定
          </Button>
        </Form.Item>
      </Form>
    </>
  );
};

export default RoomForm;
